<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		 body{
			 height: 10000px;
		 }
		 #menu{
			 height: 140px;
			 background-color: bisque;
		 }
		 #nav{
			/* position: sticky; */
			 height: 50px;
			 background-color: blue;
			 top: 150px;
			 width: 1000px;
		 }
		</style>
		<script>
		//nav这个元素离顶部窗口的距离
		var ht=0;
		window.onload=function(){
			let d=document.getElementById("nav");
			ht=d.offsetTop;
			console.log(ht);
		}
		window.onscroll=function(){
			var g=document.documentElement.scrollTop||document.body.scrollTop;
			let d=document.getElementById("nav");
			console.log("g="+g+",ht="+ht);
			if(g>=ht){
				d.style.position="fixed";
				d.style.top="5px";
				return;
			}
			d.style.position="static";
		}
		</script>
	</head>
	<body>
		<div id="menu"></div>
		<div id="nav">搜素</div>
	</body>
</html>
